<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- base jquery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/ligerUI/js/ligerui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ligerUI/js/plugins/ligerTree.js"></script>
<link href="${pageContext.request.contextPath}/js/ligerUI/skins/koala/css/style-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/datePicker/WdatePicker.js"></script>
<!-- wait.js -->
<!-- 这是一个全屏遮挡的的等待效果的插件，调用的方式为Wait.show()   取消为Wait.hide()  不需要带任何参数的，请大家不要用塔罗的那个，那个有问题 -->
<link href="${pageContext.request.contextPath}/js/wait/css/wait.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/wait/js/wait.js"></script>

<!--basic styles-->
<LINK href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<LINK href="${pageContext.request.contextPath}/css/bootstrap-responsive.min.css" rel="stylesheet">

<LINK href="${pageContext.request.contextPath}/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript" src="${pageContext.request.contextPath}/js/metro-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<SCRIPT src="${pageContext.request.contextPath}/js/ace-extra.min.js"></SCRIPT>

<!--fonts-->
<LINK href="${pageContext.request.contextPath}/css/css.css" rel="stylesheet">
<!--ace styles-->
<LINK href="${pageContext.request.contextPath}/css/ace.min.css" rel="stylesheet">
<LINK href="${pageContext.request.contextPath}/css/ace-responsive.min.css" rel="stylesheet">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>功能导航</title>
<script type="text/javascript">
var _menus =${vo.menus};


var tab = null;
var accordion = null;

function getTreeList(data){
	var list = {
		data: data,
		checkbox: false,
		slide: false,
		nodeWidth: 120,
		parentIcon: null,
		attribute: ['id','pid', 'url','sysType'],
		onSelect: function (node){
			toEditTree(node.data.id,node.data.sysType);
		}
	};
	return list;
}



function toEditTree(mid,sysType){
	$("#treeEdit").attr("src",'${pageContext.request.contextPath}/help/treeManager/toEdit.action?vo.mid='+mid+'&vo.sysType='+sysType);
	 $.ligerDialog.waitting('正在打开中,请稍候...');
	// $.ligerDialog.closeWaitting();

	//$("#treeEdit").reload();
}

function closeWaiting(){
	 $.ligerDialog.closeWaitting();
}

$(function ()
{
	//布局
	$("#layout1").ligerLayout({ leftWidth: 190, height: '100%',heightDiff:-34,space:4, onHeightChanged: f_heightChanged });
	var height = $(".l-layout-center").height();
	//Tab
	$("#framecenter").ligerTab({ height: height });
	//面板
	var panel = $("#accordion1");
	for (var name in _menus){
		var title = _menus[name];
		panel.append('<ul id="'+title.id+'"></ul>');
		var element = '[' + getElement(title,title.id) + ']';
		element = jQuery.parseJSON(element);
		var data = getTreeList(element);
		$("#"+title.id).ligerTree(data);
		var manager = $("#"+title.id).ligerGetTreeManager(); 
		manager.collapseAll();
	}
	tab = $("#framecenter").ligerGetTabManager();
});

function getElement(child,sysType){
	var url ='${pageContext.request.contextPath}/help/treeManager/toEdit.action';//'${pageContext.request.contextPath}'+child.url;
	var element = '{"id":"'+child.id+'","text":"'+child.text+'","url":"'+url+'"'+',"pid":"'+child.pid+'","sysType":"'+sysType+'"';
	if(child.children==undefined||child.children==''||child.children.length==0){
		element +='}';
		return element;
	}
		element +=',"children":';
		element += '[';
		var children = child.children;
		for(var i = 0; i < children.length; i++){
			element += getElement(children[i],sysType);
			if(children.length != 1 & i != children.length-1){
				element += ",";
			}
		}
		element += "]}";
		return element;
}

function f_heightChanged(options)
{
	if (tab)
		tab.addHeight(options.diff);
	if (accordion && options.middleHeight - 24 > 0)
		accordion.setHeight(options.middleHeight - 24);
}
function f_addTab(tabid,text, url)
{ 
	url = url.indexOf("/")==0 ? ''+url : '/'+url;
	tab.addTabItem({ tabid : tabid,text: text, url: url });
} 

</script>

</head>
<body>
<div id="layout1" style="width:99.2%; margin:0 auto; margin-top:4px; "> 
		<div position="left"  title="功能菜单" id="accordion1"> 
		
		</div>

<div position="center" id="framecenter"> 
			<div tabid="home" title="功能菜单" style="height:300px" >
				<iframe frameborder="0" name="treeEdit" id="treeEdit" src="${pageContext.request.contextPath}/help/treeManager/toEdit.action"></iframe>
			</div> 
		</div>
		</div> 	
</body>
</html>